<%@page import="com.windfone.common.Constant"%>
<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%>

<%@ taglib uri="/WEB-INF/recommend.tld" prefix="windfone" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>風馳電訊-首頁</title>
<%@ include file="head.jsp" %>
<%@ include file="headkey.jsp" %>
<script type="text/javascript" src="js/002.js"></script>
<script type="text/javascript" src="js/003.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>

<link rel="stylesheet" type="text/css" href="css/index.css"/>
<link rel="stylesheet" type="text/css" href="css/header.css"/>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<!-- 
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
 -->
<style>

#coodoo_Header a
{
	font-size:14px;
	font-weight:bold;
	font-weight:bold;
	font-size:14px;
	color:#FFFFFF;
	text-decoration:none;
}
  
</style>
<style>
html{color:black; background:white;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,blockquote,th,td{margin:0; padding:0;}
body{font-size:12px; font-family:Arial, Helvetica, sans-serif;}
img{border:0px; vertical-align:top;}
a{font-size:12px; text-decoration:none;}
a,a:link,a:visited{color:#353535;}
a:hover{color:#fc6900;}
.panel1item{width:950px; clear:both; margin:5px auto 10px auto;}
 
.dl_glist{float:left; list-style-type:none; text-align:center; height:141px; padding:0 5px 5px 5px;}
.dl_glist li{word-break:bread-all;}
.dl_glist li.img{background:white;}
.dl_glist li.pricepeijian{color:#009a00; font-weight:bold; font-size:13px;}

.peijianbox{background-color:white; border:0px solid black;width:950px;}
.peijianbox .t{background:url(images/box/box_peijian_tbg.jpg); height:24px;}
.peijianbox .b{background:url(images/box/box_peijian_bg.jpg); height:306px; width:950px;}
/*.peijianbox .b{background:url(images/box/box_peijian_bg.jpg); height:306px; width:991px;}*/
/*.peijianbox .b .l{height:292px; float:left; padding:9px 5px 5px 15px; width:933px;}*/
.peijianbox .b .l{height:292px; float:left; padding:9px 5px 5px 15px; width:940px;}
.peijianbox .b .r{float:left; height:306px; width:38px; background:url(images/box/box_peijian_rline.jpg) no-repeat 50%;}
.peijianbox .b .r .pri{padding:130px 0 0 10px;}
.peijianbox .b .r .nxt{padding:10px 0 0 10px;}
.peijianbox .f{background:url(images/box/box_peijian_bbg.jpg); height:17px;}

 
</style>	
</head>
<body style="background-color:#000000;"> 

<!-- style="background-color:#000000;" -->
<%@ include file="navigate.jsp" %>
<%--begin main area--%>
<div id="container" style="background-color:#FFFFFF;">
  <div class="left">
    <h2>热点关注</h2>
    <ul class="hot">
   		<windfone:ad attriName="hotfocus" flag="firstPagehotfocus"></windfone:ad>
	    <c:if test="${not empty hotfocus }">
		<c:forEach var="hf" items="${hotfocus}" varStatus="status">
      	<li><a href="${hf.url }" target="${hf.target}">${hf.text}</a></li>
      	</c:forEach>
      	</c:if>
    </ul>
    <div class="btmBorder hotBtm"></div>
    <h2>热门品牌<a title="点击查看更多" href="mobileCenter.action" target="_blank"></a></h2>
    <ol class="brand">
      <li><a   href="mobileCenter.action?typeId=<windfone:productType typeName='诺基亚'/>&status=1" target="_blank"><img alt="诺基亚" src="image/nokia.jpg"/></a>
        <p><a  href="mobileCenter.action?typeId=<windfone:productType typeName='诺基亚'/>&status=1" target="_blank">诺基亚</a> </p>
        <p><a  href="mobileCenter.action?typeId=<windfone:productType typeName='诺基亚'/>&status=1" target="_blank">NOKIA</a> </p>
      </li>
      <li> <a   href="mobileCenter.action?typeId=<windfone:productType typeName='索爱'/>&status=1" target="_blank"><img alt="索爱" src="image/sony.jpg"/></a>
        <p> <a  href="mobileCenter.action?typeId=<windfone:productType typeName='索爱'/>&status=1" target="_blank">索爱</a> </p>
        <p> <a  href="mobileCenter.action?typeId=<windfone:productType typeName='索爱'/>&status=1" target="_blank">SonyEricss</a> </p>
      </li>
      <li> <a   href="mobileCenter.action?typeId=<windfone:productType typeName='三星'/>&status=1" target="_blank"> <img alt="三星" src="image/samsung.jpg"/> </a>
        <p> <a  href="mobileCenter.action?typeId=<windfone:productType typeName='三星'/>&status=1" target="_blank">三星</a> </p>
        <p> <a  href="mobileCenter.action?typeId=<windfone:productType typeName='三星'/>&status=1" target="_blank">Samsung</a> </p>
      </li>
      <li> <a   href="mobileCenter.action?typeId=<windfone:productType typeName='HTC'/>&status=1"" target="_blank"> <img   src="image/htc.jpg"/> </a>
        <p> <a   href="mobileCenter.action?typeId=<windfone:productType typeName='HTC'/>&status=1"" target="_blank">HTC</a> </p>
        <p> <a   href="mobileCenter.action?typeId=<windfone:productType typeName='HTC'/>&status=1"" target="_blank">HTC</a> </p>
      </li>
      <li> <a   href="mobileCenter.action?typeId=<windfone:productType typeName='苹果'/>&status=1" target="_blank"> <img  src="image/apple.jpg"/></a>
        <p> <a  href="mobileCenter.action?typeId=<windfone:productType typeName='苹果'/>&status=1" target="_blank">苹果</a></p>
        <p> <a   href="mobileCenter.action?typeId=<windfone:productType typeName='苹果'/>&status=1" target="_blank">Apple</a></p>
      </li>
      <li style="border: 0pt none ;">
      	<a      href="mobileCenter.action?typeId=<windfone:productType typeName='摩拉'/>&status=1" target="_blank"> <img   src="image/motorola.jpg"/> </a>
        <p> <a  href="mobileCenter.action?typeId=<windfone:productType typeName='摩拉'/>&status=1" target="_blank">摩拉</a> </p>
        <p> <a   href="mobileCenter.action?typeId=<windfone:productType typeName='摩拉'/>&status=1" target="_blank">Motorola</a> </p>
      </li>
    </ol>
    <div class="btmBorder"></div>
    <h2>新机抢先看</h2>
    <div class="last">
      <windfone:commend attriName="newMobiles" commendType="<%=com.windfone.common.Constant.FIRST_PAGE_NEW_MOBILE%>"></windfone:commend>
		<c:if test="${not empty newMobiles }">
		<c:forEach var="mobile" items="${newMobiles}" varStatus="status">      
      <div>
      	<a  href="detailMobile.action?productId=${mobile.id }" target="_blank"><img  src="<%=contextPath%>/${mobile.imagepath}"/></a>
        <p class="k">&nbsp;</p>
        <p><em>${mobile.name}</em></p>
        <!-- <p><em>C5-03</em></p> -->
        <p><a href="detailMobile.action?productId=${mobile.id}" target="_blank">手机介绍</a></p>
        <p><a  href="" target="_blank">讨论专区</a></p>
      </div>
      <c:if test="${status.last!=true}"> 
      <div class="clear"></div>
      </c:if>
      </c:forEach>
      </c:if>
 
    </div>
    <div class="btmBorder"></div>
  </div>
  <div class="center">
    <div id="promotion_pos">
      <div align="center">
        <div id="MainPromotionBanner">
          <div id="SlidePlayer">
            <ul class="Slides">
            <windfone:ad attriName="pics" flag="firstPagePic"></windfone:ad>
	    		<c:if test="${not empty pics }">
	    			<c:forEach var="pc" items="${pics}" varStatus="status">
              		<li style=""><a target="_blank" href="${pc.url }"><img src="<%=contextPath %>/${pc.imagepath}"/></a></li>
              		</c:forEach>
              	</c:if>
            </ul>
            <ul class="SlideTriggers">
            	<c:if test="${not empty pics }">
	    			<c:forEach var="pc" items="${pics}" varStatus="status">
	              <li class="">${status.index}</li>
	              </c:forEach>
	             </c:if>
            </ul>
          </div>
          <script type="text/javascript">$().ready(function(){TB.widget.SimpleSlide.decoration('SlidePlayer', {eventType:'mouse', effect:'scroll'});});</script>
        </div>
      </div>
    </div>
    
    
    <div style="padding-top: 5px; height: 450px;">
    <%-- list begin 1--%>  
  <div>
	<h3 class="t" style="width: 535px;">热门机型
	<span class="leftBorder"> </span><span class="rightBorder"></span>
	</h3>
	<ul class="imageList">
			<windfone:commend attriName="firstMobiles" commendType="<%=com.windfone.common.Constant.FIRST_PAGE_HOT_MOBILE%>"></windfone:commend>
			<c:if test="${not empty firstMobiles }">
				<c:forEach var="mobile" items="${firstMobiles}" varStatus="status">
					<li>
						<a href="detailMobile.action?productId=${mobile.id }"   target="_blank"><img src="<%=contextPath%>/${mobile.imagepath}" /></a>
						<p>
							<a href="detailMobile.action?productId=${mobile.id }" target="_blank">${mobile.name }</a>
						</p>
						<p>
							<em  style="cursor: pointer;"><c:if test="${mobile.price == 0.0 }">即將上市</c:if><c:if test="${mobile.price != 0.0 }">￥${mobile.price }</c:if></em>
						</p>
					</li>
	 			</c:forEach>
	 		</c:if>
	</ul>
</div>
    <%-- list end 1--%>  
	    <%-- list begin 2--%>  
  <div>
	<h3 class="t" style="width: 535px;">主推机型
	<span class="leftBorder"> </span><span class="rightBorder"></span>
	</h3>
	<ul class="imageList">
<windfone:commend attriName="firstMobiles" commendType="<%=com.windfone.common.Constant.FIRST_PAGE_COMMEND_MOBILE%>"></windfone:commend>
			<c:if test="${not empty firstMobiles }">
				<c:forEach var="mobile" items="${firstMobiles}" varStatus="status">
					<li>
						<a href="detailMobile.action?productId=${mobile.id }"   target="_blank"><img src="<%=contextPath%>/${mobile.imagepath}" /></a>
						<p>
							<a href="detailMobile.action?productId=${mobile.id }" target="_blank">${mobile.name }</a>
						</p>
						<p>
							<em  style="cursor: pointer;"><c:if test="${mobile.price == 0.0 }">即將上市</c:if><c:if test="${mobile.price != 0.0 }">￥${mobile.price }</c:if></em>
						</p>
					</li>
	 </c:forEach>
	 </c:if>
	</ul>
</div>	
	    <%-- list end 2--%>
    </div>
  </div>
  <div class="right">
    <h2><em>快速帮助</em><span class="s1"></span><span class="s2"></span></h2>
    <div class="select telNum">
      <div>
        <p><img alt="" src="image/greenPhone.gif" align="abscenter"/> 销售咨询 及 邮购电话：</p>
        <windfone:ad attriName="salephones" flag="firstPageRightsalePhone"></windfone:ad>
        <p><span><font style="font-size: 12px;">   	
        <c:if test="${not empty salephones }">
		<c:forEach var="salephone" items="${salephones}" varStatus="status">
			${salephone.text }
		</c:forEach>
		</c:if>
		</font></span></p>
      </div>
      <div>
        <p><img  src="image/greenPhone.gif" align="abscenter"/> 售后服务 及 维修咨询：</p>
        <p><span><font style="font-size: 12px;">
        <windfone:ad attriName="repairephones" flag="firstPageRightrepairPhone"></windfone:ad>
            <c:if test="${not empty repairephones }">
		<c:forEach var="repairhone" items="${repairephones}" varStatus="status">
			${repairhone.text }
		</c:forEach>
		</c:if>
        </font></span></p>
      </div>
    	<a href="about.action?type=contact"  target="_blank"><img   src="image/xun1.gif"/></a> 
      </div>
    <div class="btmBorder grayBtm"></div>
    <div class="twoImage">
    	<windfone:ad attriName="secondPics" flag="firstPageRightPic"></windfone:ad>
     	<c:if test="${not empty secondPics }">
		<c:forEach var="spc" items="${secondPics}" varStatus="status">
    		<a href="${spc.url }" target="_blank"><img src="${spc.imagepath }" border="0"/></a> 
    	</c:forEach>
    	</c:if>
    </div>
    <h2 class="tri">
    	<em>风驰通讯各分店</em>
    	<span class="s1"></span>
    	<span class="s2"></span>
    </h2>
    <div class="select shopSite">
		 <windfone:ad attriName="rightWenzis" flag="firstPageRightWenzi"></windfone:ad>
     	<c:if test="${not empty rightWenzis }">
		<c:forEach var="wz" items="${rightWenzis}" varStatus="status">
         	<p><a target="_blank" href="${wz.url }"><img id="branch_img" src="${wz.imagepath }" style="width: 156px; height: 114px;"/></a></p>
	     	<p><a   href="${wz.url }" target="_blank">${wz.text}</a></p>
         	<div style="height:1px;background:#D5E2EA;padding:0;"><br/></div>
         	<p>&nbsp;</p>
         </c:forEach>
         </c:if>
      	<p class="sc"><a title="客服中心" href="about.action?type=serviceCenter" target="_blank"><i>service centre</i> &nbsp; &gt; 客服中心</a></p>
    </div>
    <div class="btmBorder"></div>
  </div>
  
  
   
<div class="panel1item" style="background-color:#FFFFFF;">
		<!-- 手机配件 -->
		<div class="peijianbox">
			<a href="pjCenter.action"><div class="t"></div></a>
			<div class="b">
				<div class="l">
					<div class="pjcont" id="divPJ1">
				<windfone:commend attriName="firstFitts" commendType="<%=com.windfone.common.Constant.FIRST_PAGE_NEW_FITTING%>"></windfone:commend>
				<c:if test="${not empty firstFitts }">
				<c:forEach var="fitting" items="${firstFitts}" varStatus="status">					
							<ul class="dl_glist" style="width: 123px;">
								  <li class="img">
								    <a href="<%=contextPath%>/pjDetail.action?peijianId=${fitting.id}">
								      <img src="<%=contextPath%>/${fitting.imagepath}" style="width: 70px; height: 90px;"/>
								    </a>
								  </li>
								  <li>
								    <a href="<%=contextPath%>/pjDetail.action?peijianId=${fitting.id}">${fitting.typeName}</a>
								  </li>
								   <li class="pricepeijian">￥${fitting.price }</li>
						</ul>
					</c:forEach>
					</c:if>						
					</div>
				</div>
		 <!-- 
				<div class="r">
					<div class="pri"><a <%-- href="javascript:pjpriv()"--%> href="#"><img src="image/box_peijian_priv.jpg" /></a></div>
					<div class="nxt"><a <%--href="javascript:pjnext()"--%> href="#"><img src="image/box_peijian_next.jpg" /></a></div>
				</div>		 
				-->
				<div class="floatend"></div>
			</div>
			<div class="f"></div>
		</div>

</div>
  <%@ include file="bottom.jsp" %>
  
  
  
  
</div>
<!--  peijian end area -->

<!--  peijian begin area -->
<div style="width:950px;height: 15">&nbsp;</div>
<%-- end main area--%>
  
</body>

 

<script type="text/javascript">
    var curr = 0, next = 0, count = 0;
    $(document).ready(function() {
        // 记录图片的数量
        count = $('.flash_txt a').size();
        t = setInterval('imgPlay()', 3000);

        // 鼠标移动到图片或导航上停止播放，移开后恢复播放
        $('.flash_img, .flash_txt a').hover(function() {
            clearInterval(t);
        }, function() {
            t = setInterval('imgPlay()', 3000);
        });

        //点击导航播放到相应的图片
        $('.flash_txt a').mouseover(function() {
            // index()函数返回当前导航的下标
            var index = $('.flash_txt a').index(this);
            if (curr != index) {
                play(index);
                curr = index;
            };
            return false;
        });
    });

    // 播放图片的函数
    var imgPlay = function() {
        next = curr + 1;
        // 若当前图片播放到最后一张，这设置下一张要播放的图片为第一张图片的下标
        if (curr == count - 1) next = 0;
        play(next);

        curr++;
        // 在当前图片的下标加1后，若值大于最后一张图片的下标，则设置下一轮其实播放的图片下标为第一张图片的下标，而next永远比curr大1
        if (curr > count - 1) { curr = 0; next = curr + 1; }
    };

    // 控制播放效果的函数
    var play = function(next) {
        // 当前的图片滑到左边-500px，完成后返回到右边490px
        // 下一张图片滑到0px处，完成后导航的焦点切换到下一个点上
        $('.flash_img li').eq(curr).css({ 'opacity': '0.5' }).animate({ 'left': '0px', 'opacity': '1' }, '', function() {
            $(this).css({ 'left': '156px' });
        }).end()
        .eq(next).animate({ 'left': '0px', 'opacity': '1' }, '', function() {
            $('.flash_txt a').siblings('a').removeClass('active').end().eq(next).addClass('active');
        });
    };


</script>
 
</html>
